<template>
  <el-dialog :visible="visible"
             :before-close="handleCancel"
             :close-on-click-modal="false"
             title="拒签信息"
             width="750px"
             top="20vh"
             append-to-body>
    <el-table :data="rejectsTableData">
      <el-table-column label="#"
                       type="index"></el-table-column>
      <template v-for="(column, index) in tableColumn">
        <el-table-column :key="index"
                         :width="`${column.width}px`"
                         v-bind="column">
          <template slot-scope="scope">
            <el-input v-if="column.name === 'quantity'"
                      v-model.trim="scope.row[column.name]"
                      :maxlength="column.maxlength"
                      :class="!addFlag && !scope.row[column.name]? 'red-board' : ''"
                      @input="handleInput(scope.row, column.name)" />
            <el-input v-else-if="column.name === 'boxNo'"
                      v-model.trim="scope.row[column.name]"
                      :maxlength="column.maxlength"
                      :class="!addFlag && !scope.row[column.name]? 'red-board' : ''" />
            <el-input v-else
                      v-model.trim="scope.row[column.name]"
                      :maxlength="column.maxlength" />
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作"
                       :width="`60px`">
        <template slot-scope="{$index}">
          <icon-svg icon-name="shanchu1"
                    class-name="iconSty-1 pointer"
                    @click="handleDelete($index)" />
        </template>
      </el-table-column>
    </el-table>
    <div v-if="isRowLength"
         class="add-cost">
      <span @click="handleAdd">
        <icon-svg class="c-primary"
                  icon-name="tianjiazhandian"></icon-svg>
        新增
      </span>
    </div>
  </el-dialog>
</template>
<script>
import _ from "lodash";

export default {
  name: "GoodsRefuseSign",
  props: {
    value: {
      type: Array,
      default: () => []
    },
    visible: Boolean
  },
  data () {
    return {
      tableColumn: [
        { label: "*箱号", name: "boxNo", maxlength: 30, width: 200 },
        { label: "*拒签数量", name: "quantity", maxlength: 7, width: 120 },
        { label: "拒签原因", name: "reason", maxlength: 50, with: 500 }
      ],
      addFlag: true,
      // length: 0,
      rejectsTableData: []
    };
  },
  computed: {
    isRowLength () {
      return this.rejectsTableData.length <= 4
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (value) {
        this.rejectsTableData = _.cloneDeep(value || [])
      }
    }
  },
  methods: {
    handleInput (row, name) {
      let regStr = /^[1-9]\d*$/;
      if (name && !regStr.test(row[name])) {
        row[name] = null;
      }
    },
    handleAdd () {
      this.addFlag = true;
      let newArr = this.rejectsTableData.filter(item => !item.boxNo || !item.quantity)
      if (newArr.length) {
        return this.addFlag = false;
      }
      // this.length = this.rejectsTableData.length;
      if (this.rejectsTableData.length < 5) {
        this.rejectsTableData.push({});
      }
    },
    // 删除费用
    handleDelete (index) {
      this.rejectsTableData.splice(index, 1);
    },
    handleCancel () {
      let newArr = this.rejectsTableData.filter(item => !item.boxNo || !item.quantity)
      if (newArr.length) {
        this.addFlag = false;
        return this.$message.error("箱号或拒签数量要填写完整");
      }
      // let refuseNum = 0;
      // this.rejectsTableData.length && this.rejectsTableData.map(item => {
      //   refuseNum += Number(item.quantity);
      // })
      this.$emit('input', this.rejectsTableData)
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.icon-delete {
  color: var(--prev-icon-color-orange);
  cursor: pointer;
  margin-left: 5px;
  font-size: 16px;
}
.add-cost {
  border: 1px solid var(--prev-border-color-lighter);
  text-align: center;
  padding: 8px;
  font-size: 14px;
  color: var(--prev-color-text-primary);
  margin-top: -1px;
  height: 40px;
  line-height: 40px;
  span {
    cursor: pointer;
  }
  .icon {
    font-size: 20px;
  }
}
.red-board {
  border: 1px solid var(--prev-color-text-red);
  border-radius: 4px;
}
.h24 {
  height: 24px;
}
.iconSty-1 {
  width: 15px;
  height: 15px;
}
</style>
